<template>
    <div class="box">
<!--        地图-->
        <Map />
<!--        dom渲染-->
        <cars />
<!--        会员-->
        <div id="user-view" :class="{'hide':!show}">
            <router-view></router-view>
        </div>
        <navbar />
    </div>
</template>

<script>
    import Map from '../amap/index'
    import cars from '../cars/index'
    import navbar from '@c/navbar/index'
    export default {
        components:{
            Map,
            cars,
            navbar
        },
        computed:{
            show(res){
                console.log(this.$route.name)
                return this.$route.name === 'User'
            }
        },
        watch:{
            '$route':{
                handler(data){
                    console.log(data)
                    this.open = data !== 'Index'
                }
            }
        },
        data(){
            return{
                open:false
            }
        }
    }
</script>

<style lang="scss">
#user-view{
    position: fixed;
    width: 410px;
    top: 0;
    right: 0;
    background-color: #34393f;
    height: 100vh;
    transition: all .3s ease 0s;
    &.hide{
        right: -600px;
    }
}
</style>